import { useTranslation } from '@pancakeswap/localization'
import { Currency, Price } from '@pancakeswap/swap-sdk-core'
import { AtomBox, Text } from '@pancakeswap/uikit'
import { formatPrice } from '@pancakeswap/utils/formatFractions'
import Slider, { SliderProps } from 'rc-slider'
import 'rc-slider/assets/index.css'
import { useCallback, useMemo } from 'react'
import { useInverted } from 'state/infinity/shared'
import styled from 'styled-components'

const StyledSlider = styled(Slider)`
  padding-bottom: 24px;
  margin-bottom: 24px;

  .rc-slider-rail {
    background-color: ${({ theme, disabled }) => theme.colors[disabled ? 'textDisabled' : 'inputSecondary']};
    height: 2px;
    position: absolute;
    top: 10px;
    width: 100%;
  }

  .rc-slider-track {
    background-color: ${({ theme }) => theme.colors.primary};
    filter: ${({ disabled }) => (disabled ? 'grayscale(100%)' : 'none')};
    height: 10px;
  }

  .rc-slider-handle {
    -webkit-appearance: none;
    background-color: transparent;
    box-shadow: none;
    border: 0;
    cursor: pointer;
    width: 32px;
    height: 48px;
    filter: none;
    transition: 200ms transform;
    margin-top: -18px;
  }

  .rc-slider-handle-1 {
    background-image: url('');
  }

  .rc-slider-handle-2 {
    background-image: url('');
  }
`

const Middle = styled.div`
  height: 24px;
  width: 2px;
  min-width: 2px;
  max-width: 2px;
  background-color: ${({ theme }) => theme.colors.textSubtle};
  box-shadow: 0 0 0 2px ${({ theme }) => theme.colors.white};
  border-radius: 2px;
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 5px;
  margin-left: -1px;
`

const MiddleTooltip = styled.div`
  background-color: ${({ theme }) => theme.colors.textSubtle};
  padding: 16px;
  font-size: 16px;
  line-height: 130%;
  border-radius: 16px;
  max-width: 320px;
  z-index: 101;
  color: ${({ theme }) => theme.colors.white};
  margin: 0 auto;
  position: relative;
  margin-bottom: 16px;

  &::before {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    z-index: -1;
    content: '';
    transform: translateX(-50%) rotate(45deg);
    background: ${({ theme }) => theme.colors.textSubtle};
    bottom: -4px;
    left: 50%;
  }
`

export const BinRangeSliderInner: React.FC<SliderProps> = (props) => {
  return <StyledSlider range {...props} />
}

type BinRangeSliderProps = SliderProps & {
  activePrice: Price<Currency, Currency> | undefined | null
  min: number
  max: number
}

export const BinRangeSlider: React.FC<BinRangeSliderProps> = ({
  activePrice,
  min,
  max,
  value,
  defaultValue,
  onChange,
  ...props
}) => {
  const { t } = useTranslation()
  const [inverted] = useInverted()
  const min_ = useMemo(() => (inverted ? -max : min), [inverted, min, max])
  const max_ = useMemo(() => (inverted ? -min : max), [inverted, min, max])
  const value_ = useMemo(() => {
    if (!value) return value
    return inverted ? [-value[1], -value[0]] : value
  }, [inverted, value])
  const defaultValue_ = useMemo(() => {
    if (!defaultValue) return defaultValue
    return inverted ? [-defaultValue[1], -defaultValue[0]] : defaultValue
  }, [inverted, defaultValue])

  const onChange_ = useCallback(
    (newValue: number | number[]) => {
      const [minV, maxV] = Array.isArray(newValue) ? newValue : [newValue, newValue]
      if (!onChange) return
      onChange(inverted ? [-maxV, -minV] : [minV, maxV])
    },
    [inverted, onChange],
  )

  if (!activePrice) return null

  return (
    <AtomBox style={{ position: 'relative' }}>
      <MiddleTooltip>
        <Text bold color="white" as="span">
          {t('Active Bin: %price%', { price: activePrice.denominator ? formatPrice(activePrice, 8) : '0' })}
        </Text>
        <Text color="white" as="span" ml={1}>
          {t('%base% per %quote%', { base: activePrice.quoteCurrency.symbol, quote: activePrice.baseCurrency.symbol })}
        </Text>
      </MiddleTooltip>
      <Middle>&nbsp;</Middle>
      <BinRangeSliderInner
        min={min_}
        max={max_}
        value={value_}
        defaultValue={defaultValue_}
        onChange={onChange_}
        {...props}
      />
    </AtomBox>
  )
}
